<template>
  <div class="app-container">
    <el-card class="box-card search-box">
      <el-form :inline="true" :model="formData" class="queryForm">
        <el-form-item>
          <div class="sub-title">时间(起)</div>
          <el-date-picker
            v-model="formData.startTime"
            size="small"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间(起)"
            align="right"
            :picker-options="pickerOptions1"
            @change="setStartDate">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <div class="sub-title">时间(止)</div>
          <el-date-picker
            v-model="formData.endTime"
            size="small"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间(止)"
            align="right"
            :picker-options="pickerOptions1"
            @change="setEndDate">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <div class="sub-title">楼盘名称</div>
          <el-select v-model="formData.village_id" placeholder="请选择楼盘名称" size="small">
            <el-option v-for="vill in villageData" :key="vill.village_id" :label="vill.name" :value="vill.village_id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button size="small" class="search-btn-style" icon="el-icon-download" type="primary"
                     @click="downloadExcel">导出表格
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <el-table
      :data="tableData"
      border
      style="width: 100%;margin-top: 20px;">
      <el-table-column
        prop="create_time"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="village"
        label="楼盘姓名"
        width="180">
      </el-table-column>
      <el-table-column
        label="地址">
        <template slot-scope="scope">
          {{scope.row.province}} {{scope.row.city}}
        </template>
      </el-table-column>
      <el-table-column
        label="用户">
        <template slot-scope="scope">
          {{scope.row.user_name}} {{scope.row.mobile}}
        </template>
      </el-table-column>
    </el-table>


    <!--<el-button style="margin-top: 50px;" @click="dialogFormVisible = true" type="primary" icon="el-icon-download">导出表格-->
    <!--</el-button>-->


    <!--<el-dialog title="收货地址" center :visible.sync="dialogFormVisible" width="30%">-->
    <!--<el-form :model="formData">-->
    <!--<el-form-item label="时间(起)">-->
    <!--<el-date-picker-->
    <!--v-model="formData.startTime"-->
    <!--size="small"-->
    <!--type="datetime"-->
    <!--placeholder="选择日期时间(起)"-->
    <!--align="right"-->
    <!--:picker-options="pickerOptions1"-->
    <!--@change="setStartDate">-->
    <!--</el-date-picker>-->
    <!--</el-form-item>-->

    <!--<el-form-item label="时间(止)">-->
    <!--<el-date-picker-->
    <!--v-model="formData.endTime"-->
    <!--size="small"-->
    <!--type="datetime"-->
    <!--placeholder="选择日期时间(止)"-->
    <!--align="right"-->
    <!--:picker-options="pickerOptions1"-->
    <!--@change="setEndDate">-->
    <!--</el-date-picker>-->
    <!--</el-form-item>-->

    <!--<el-form-item label="楼盘名称" style="margin-bottom: 0;">-->
    <!--<el-select v-model="formData.village" placeholder="请选择楼盘名称" size="small">-->
    <!--<el-option v-for="vill in tableData" :key="vill.id" :label="vill.village" :value="vill.village"></el-option>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <!--</el-form>-->

    <!--<div slot="footer" class="dialog-footer">-->
    <!--<el-button @click="dialogFormVisible = false">取 消</el-button>-->
    <!--<el-button type="primary" @click="downloadExcel">确 定</el-button>-->
    <!--</div>-->
    <!--</el-dialog>-->

    <el-pagination class="pagination-style" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

</template>

<script>
  export default {
    name: "order",
    data() {
      return {
        // 分页参数
        pageSize: 20,
        pageNum: 1,
        currentPage: 1,
        total: 0,
        tableData: [],
        dialogFormVisible: false,
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        formData: {
          startTime: '',
          endTime: '',
          village_id: ''
        },
        villageData: []
      }
    },
    created() {
      this.fetchData(this.pageNum)
      this.villageList()


    },
    methods: {
      fetchData(pageNum) {
        this.$http.post('reserve/list', {page: pageNum, pageSize: this.pageSize}).then(data => {
          if (data && data.data && data.data.data) {
            this.tableData = data.data.data.data
          }
        })
      },
      villageList() {
        this.$http.post('reserve/village/list', {}).then(data => {
          if (data && data.data && data.data.data) {
            console.log('data.data.data ', data.data.data)
            this.villageData = data.data.data
          }
        })
      },
      //page
      handleCurrentChange(val) {
        this.currentPage = val
        this.fetchData(this.currentPage)
      },
      setStartDate(val) {
        console.log(val)
        this.formData.startTime = val
      },
      setEndDate(val) {
        console.log(val)
        this.formData.endTime = val
      },
      downloadExcel() {
        console.log(this.formData)
        this.dialogFormVisible = false
        window.open('http://ss.yprhealth.com/ops/reserve/export?' + 'startTime=' + this.formData.startTime + '&endTime=' + this.formData.endTime + '&village=' + this.formData.village_id)
      }
    }
  }
</script>

<style scoped>
  .pagination-style {
    text-align: right;
    margin-top: 18px;
  }

  .search-btn-style {
    margin-left: 20px !important;
    margin-top: 42px !important;
  }

</style>
